<template>
  <div>
    <br>
    <el-form :inline="true">
      <el-form-item label="房源所在省份">
        <v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSearch"></v-distpicker>
      </el-form-item>



      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>
    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column prop="id" label="编号" width="200"></el-table-column>
      <el-table-column  label="图片" width="600">
        <template slot-scope="scope">
          <div class="block">
            <el-image v-for="(cp,index) in scope.row.image " :key="index"
                      style="width: 100px; height: 100px;margin: 10px;"
                      :src="cp">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="province" label="省份" width="80"></el-table-column>
      <el-table-column prop="city" label="城市" width="80"></el-table-column>
      <el-table-column prop="county" label="区/县" width="80"></el-table-column>
      <el-table-column prop="address" label="详细地址" width="280"></el-table-column>
      <el-table-column prop="rent_way" label="租房方式" width="80"></el-table-column>
      <el-table-column prop="rent" label="租金" width="80"></el-table-column>
      <el-table-column prop="orientation" label="房屋朝向" width="80"></el-table-column>
      <el-table-column prop="type" label="房屋类型" width="180"></el-table-column>
      <el-table-column prop="bailor" label="委托人" width="80"></el-table-column>
      <el-table-column prop="bailor_time" label="委托时间" width="180"></el-table-column>
      <el-table-column prop="square" label="房屋面积" width="80"></el-table-column>
      <el-table-column prop="floor" label="房屋所在楼层" width="180"></el-table-column>
      <el-table-column label="电梯" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.elevator" true-label="1" false-label="0"
                       @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="车位" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.carport" true-label="1" false-label="0"
                       @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="用水" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.water" true-label="1" false-label="0"
                       @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="用电" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.electricity" true-label="1" false-label="0"
                       @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="燃气" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.gas" true-label="1" false-label="0" @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="heater" label="取暖" width="80">
        <template slot-scope="scope">
          <el-checkbox label="有" v-model="scope.row.heater" true-label="1" false-label="0"
                       @change="changeData(scope.row)">
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="tenancy" label="租期" width="80"></el-table-column>
      <el-table-column prop="status" label="房屋状态" width="180">
        <template slot-scope="scope">
          <el-switch label="有" v-model="scope.row.status"
                     active-text="正常" inactive-text="已租"
                     active-value="1" inactive-value="0"
                     @change="changeData(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="inquiries" label="咨询量" width="80"></el-table-column>
      <el-table-column prop="look_for" label="看房量" width="80"></el-table-column>
      <el-table-column prop="house_title" label="房源标题" width="180"></el-table-column>
      <el-table-column prop="num" label="标号" width="80"></el-table-column>
      <el-table-column prop="create_time" label="委托时间" width="180" ></el-table-column>
      <el-table-column prop="update_time" label="维护时间" width="180"></el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)"  size="small">编辑</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page.sync="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="180px">
        <el-form-item label="图片">
          <div class="block">
            <li v-for="(cp,index) in pojo.image " :key="index" style="width: 100px; height: 100px;margin: 10px;display: inline-block;">
              <el-image
                :src="cp"  style="width:100%;height:100%">
              </el-image>

              <span class="el-icon-delete" style="margin:  0 auto;width: 100px;text-align:center;cursor: pointer" @click="deleteImage(cp,index)"></span>

            </li>

          </div>
          <el-upload
            action="http://localhost:9999/rent/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :limit="limitImageCount"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="房源所在省份">
          <v-distpicker province="广东省" city="广州市" area="海珠区" @selected="onSelected"></v-distpicker>

        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="pojo.address"></el-input>
        </el-form-item>
        <el-form-item label="租房方式">
          <el-input v-model="pojo.rent_way"></el-input>
        </el-form-item>
        <el-form-item label="租金">
          <el-input v-model="pojo.rent"></el-input>
        </el-form-item>
        <el-form-item label="房屋朝向">
          <el-input v-model="pojo.orientation"></el-input>
        </el-form-item>
        <el-form-item label="房屋类型">
          <el-input v-model="pojo.type"></el-input>
        </el-form-item>
        <el-form-item label="委托人">
          <el-input v-model="pojo.bailor"></el-input>
        </el-form-item>
        <el-form-item label="委托时间">
          <el-input v-model="pojo.bailor_time"></el-input>
        </el-form-item>
        <el-form-item label="房屋面积">
          <el-input v-model="pojo.square"></el-input>
        </el-form-item>
        <el-form-item label="房屋所在楼层">
          <el-input v-model="pojo.floor"></el-input>
        </el-form-item>

        <el-form-item label="配套设施">
          <el-checkbox label="电梯"  v-model="pojo.elevator" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="车位"  v-model="pojo.carport" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="用水"  v-model="pojo.water" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="用电"  v-model="pojo.electricity" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="燃气"  v-model="pojo.gas" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="取暖"  v-model="pojo.heater" true-label="1" false-label="0"></el-checkbox>
          <el-checkbox label="用电"  v-model="pojo.electricity" true-label="1" false-label="0"></el-checkbox>
        </el-form-item>
        <el-form-item label="租期">
          <el-input v-model="pojo.tenancy"></el-input>
        </el-form-item>
        <el-form-item label="房源标题">
          <el-input v-model="pojo.house_title"></el-input>
        </el-form-item>

        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import resourceApi from '@/api/resource'
  import areaApi from '@/api/area'

  export default {
    data() {
      return {
        list: [],
        test: [],
        area: [],
        total: 0, // 总记录数
        currentPage: 1, // 当前页
        pageSize: 10, // 每页大小
        searchMap: {}, // 查询条件
        dialogFormVisible: false, // 编辑窗口是否可见
        pojo: {}, // 编辑表单绑定的实体对象
        cityList: [], // 城市列表
        dialogImageUrl: '',
        dialogVisible: false,
        uploadPicture: [],
        fileList:[],
        limitImageCount:6,
        id: '' // 当前用户编辑的ID
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        resourceApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      },
      handleSave() {
        if (this.pojo.id != null) {

          for (var i = 0; i < this.uploadPicture.length; i++) {
            this.pojo.image.push(this.uploadPicture[i]);
          }
        } else {
          this.pojo.image = [];
          for (var i = 0; i < this.uploadPicture.length; i++) {
            this.pojo.image.push(this.uploadPicture[i]);
          }
        }
        var im = JSON.stringify(this.pojo.image);
        this.pojo.image = im
        resourceApi.update(this.id, this.pojo).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.fetchData() // 刷新列表
            this.fileList = [];
          }
        })
        this.dialogFormVisible = false // 关闭窗口
      },
      handleEdit(id) {
        this.fileList = [];
        this.id = id
        this.dialogFormVisible = true // 打开窗口
        if (id !== '') { // 编辑
          resourceApi.findById(id).then(response => {
            if (response.flag) {
              this.pojo = response.data
            }
          })
        } else {
          this.pojo = {} // 清空数据
        }
      },
      handleDelete(id) {
        this.$confirm('确定要删除此纪录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resourceApi.deleteById(id).then(response => {
            this.$message({message: response.message, type: (response.flag ? 'success' : 'error')})
            if (response.flag) {
              this.fetchData() // 刷新数据
            }
          })
        })
      },
      changeData(data) {
        resourceApi.update(data.id, data).then(response => {
          this.$message({
            message: response.message,
            type: (response.flag ? 'success' : 'error')
          })
          if (response.flag) { // 如果成功
            this.fetchData() // 刷新列表
          }
        })
      },
      formatDate (date){
         // this.value1= new Date(value);
         // let dateValue = this.$moment(this.value1).format("YYYY-MM-DD HH:mm:ss");
         // return dateValue
        var dataee=new Date(date).toJSON();
        console.log(dataee);
        var date = new Date(+new Date(dataee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
        console.log("时间2==="+date);
        return date;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {

        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleUploadSuccess(response, file, fileList) {
        var total = 0;
        console.log(this.pojo)
        if (this.pojo.image != null ) {
          total =  fileList.length+this.pojo.image.length;

        }else{
          total = fileList.length;
        }

        if (total>6) {
          this.$alert('房源描述最多6张图片', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${action}`
              });
            }
          });
        }else{
          console.log("---------------")
          console.log(fileList)
          this.uploadPicture = [];
          for (var i = 0; i < fileList.length; i++) {
            console.log(fileList.length)
            this.uploadPicture.push("https://1321654.oss-cn-beijing.aliyuncs.com/"+fileList[i].response.src);
          }
        }
      },
      handleExceed(file, fileList) {

        this.$alert('房源描述最多6张图片', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            });
          }
        });
      },

      deleteImage(src, index) {
        var picture = this.pojo.image;
        console.log(src + "   " + index)
        this.$confirm('确定要删除此图片吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          picture.splice(index,1);
        })
        this.pojo.image = picture;
      },
      handleChange(value) {
        console.log(value);
      },
      onSelected(data) {
        this.pojo.province = data.province.value
        this.pojo.city = data.city.value
        this.pojo.county = data.area.value
      },

      onSearch(data){
        this.searchMap.province = data.province.value
        this.searchMap.city = data.city.value
        this.searchMap.county = data.area.value
      }
    }
  }
</script>
